<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" href="../css/toastr.css" />
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../js/toastr.js"></script>
		<script type="text/javascript" src="js/headandfoot.js"></script>
	</head>

	<body>
	
	<header style=""></header>
	
		<div style="width: 1000px; margin: 50px auto;">
			<div style="display: inline-block; width: 400px;">
				<form class="form-horizontal">
					<div class="form-group">
						<label for="albumId" class="col-sm-2 control-label">上传类型</label>
						<div class="col-sm-10">
							<select name="albumId" id="albumId" class="form-control" required="required">
								<option value="">请选择</option>
								<option value="1">人物</option>
								<option value="2">风景</option>
								<option value="3">动漫</option>
								<option value="0">其他</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="photo" class="col-sm-2 control-label">照片</label>
						<div class="col-sm-10">
							<input type="file" name="img" id="photo" accept="image/*" class="hidden" required="required" />
							<label type="button" class="btn btn-danger _img" for="photo"><i class="fa fa-image"></i> 选择图片</label>
						</div>
					</div>
					<div class="form-group">
						<label for="photoName" class="col-sm-2 control-label">标题</label>
						<div class="col-sm-10">
							<input type="text" name="photoName" id="photoName" class="form-control" placeholder="">
						</div>
					</div>
					<div class="form-group">
						<label for="photoMemo" class="col-sm-2 control-label">备注</label>
						<div class="col-sm-10">
							<input type="text" name="photoMemo" id="photoMemo" class="form-control" placeholder="">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button class="btn btn-default">上传</button>
						</div>
					</div>
				</form>
			</div>
			<div style="display: inline-block; width: 400px; vertical-align: top;">
				<div style="min-width: 100px; min-height: 100px;">
					<img src="../img/_noimg.png" id="imgShow" style="max-height: 300px;"/>
				</div>
				<div class="progress" style="display: none; margin-top: 1em;">
					<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
					</div>
				</div>
			<div>
		</div>
		<script>
			var form = $("form");
			var imgFile = form.find(":file[name='img']");
			console.info(imgFile);
			var img = $("#imgShow");
			
			imgFile.on("change", function() {
				var f = imgFile[0].files[0];
				console.info(f);
				var reader = new FileReader();
				reader.onload = function() {
					//		alert("aa");
					img[0].src = reader.result;
				}
				reader.readAsDataURL(f);
			});
			var progress = $(".progress");
			
			form.on("submit", function() {
				let formData = new FormData(form[0]);
			
				progress.show();
			
				$.ajax({
					type: "post",
					url: "upload-pic.do",
					processData: false, // 不会将 data 参数序列化字符串
					contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
					data: formData,
					success: function(data) {
						if(data.ok) {
							toastr.success("上传成功");
							form.trigger("reset");
						} else {
							toastr.error(data.message);
						}
						progress.hide();
					},
					dataType: "json",
					xhr: function() {
						var xhr = new window.XMLHttpRequest();
						xhr.upload.addEventListener("progress", function(evt) {
							if(evt.lengthComputable) {
								var percentComplete = evt.loaded * 100 / evt.total;
								progress.children().css("width", percentComplete + "%");
							}
						}, false);
						return xhr;
					}
				});
			
				return false;
			});
		</script>
	</body>

</html>